import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_tutorial/app/modules/home/home_controller.dart';
import 'package:getx_tutorial/app/routes/app_pages.dart';

class HomePage extends GetView<HomeController> {

  List types = [
    { 'key': 'top', 'title': '头条'},
    { 'key': 'shehui', 'title': '社会'},
    { 'key': 'guonei', 'title': '国内'},
    { 'key': 'guoji', 'title': '国际'},
    { 'key': 'yule', 'title': '娱乐'},
    { 'key': 'tiyu', 'title': '体育'},
    { 'key': 'junshi', 'title':  '军事'},
    { 'key': 'keji', 'title': '科技'},
    { 'key': 'caijing', 'title': '财经'},
    { 'key': 'shishang', 'title': '时尚'},
    { 'key': 'youxi', 'title': '游戏'},
    { 'key': 'qiche', 'title': '汽车'},
    { 'key': 'jiankang', 'title': '健康'}
  ];

  @override
  Widget build(BuildContext context) {
    print(Get.parameters);

    return Scaffold(
      appBar: AppBar(
        title: Text('HomePage'),
        centerTitle: true,
      ),

      body: SafeArea(
        child: Column(
          children: [
            // 头部分类导航
            Container(
              height: 50,
              width: Get.width,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: types.length,
                itemBuilder: (context, index) {
                  return Obx(() => _renderType(index));
                }
              ),
            ),
            
            Expanded(
              child: controller.obx(
                (state) => ListView.builder(
                  itemCount: state!.data!.length,
                  itemBuilder: (context, index) {
                    final item = state.data![index];
                    // print(item);
                    return ListTile(
                      isThreeLine: true,
                      leading: Image.network(
                        item.thumbnailPicS.toString()
                      ),
                      title: Text(
                        item.title.toString(),
                        overflow: TextOverflow.ellipsis,
                      ),
                      subtitle: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(item.authorName.toString()),
                          Text(item.date.toString())
                        ],
                      ),
                      
                      // trailing: Icon(Icons.chevron_right_outlined),
                      onTap: () {
                        Get.toNamed(Routes.NEWS+"?uniquekey="+item.uniquekey.toString());
                      },
                    );
                  },
                ),
                onLoading: Center(child: CircularProgressIndicator()),
                onError: (error) => Center(
                  child: Text(
                    'Error: $error',
                    style: TextStyle(fontSize: 18),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            )
          ],
        )
      )
    );
  }

  Widget _renderType(int i) {
    return GestureDetector(
      child: Container(
        alignment: Alignment.center,
        padding: EdgeInsets.symmetric(vertical: 2, horizontal: 10),
        decoration: BoxDecoration(
          color: controller.currentIndex == i ? Colors.blue.shade100 : Colors.grey.shade100,
          border: Border(
            bottom: BorderSide(
              width: 3,
              color: controller.currentIndex == i ? Colors.blue.shade200 : Colors.grey.shade100
            ),
          ),
        ),
        child: Text(
          types[i]['title'],
          style: TextStyle(
            color: controller.currentIndex == i ? Colors.blue : Colors.black45,
            fontWeight: controller.currentIndex == i ? FontWeight.w600 : FontWeight.w400,
            fontSize: 16,
          ),
        ),
      ),
      onTap: () {
        controller.currentIndex.value = i; //记录选中的下标
        controller.type.value = types[i]['key'];
        controller.getNewsList();
      },
    );
  }
}